import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {
  Header,
  ObserverButton,
  ObserverText,
  ObserverView,
  Switch,
} from '../../../components';
import {
  AUTO_LOGIN,
  dpw12,
  dpw16,
  dpw24,
  dpw8,
  HISTORY_LIST,
  USER_INFO,
} from '../../../constants';
import {useGlobalStore, useUserInfoStore} from '../../../mobx';
import {setItem} from '../../../utils';
import {SvgRight} from '../../../components/svg';
import {observer} from 'mobx-react-lite';

const AutoLogin = observer(() => {
  const {theme, autologin, changeAutoLogin} = useGlobalStore();

  const onAutoLogin = (v: boolean) => {
    setItem(AUTO_LOGIN, v)
      .then(() => {
        changeAutoLogin(v);
      })
      .catch(() => {});
  };

  return <Switch theme={theme} value={autologin} onValueChange={onAutoLogin} />;
});

const Setting = ({navigation}: any) => {
  const {clearUserInfo} = useUserInfoStore();
  const {changeToastKey} = useGlobalStore();

  const onEditPsd = () => {
    if (navigation) {
      navigation.navigate('edit-psd');
    }
  };

  const onCleanHistory = () => {
    setItem(HISTORY_LIST, null)
      .then(() => {
        changeToastKey('clearSucsess');
      })
      .catch(() => {});
  };

  const onLogout = () => {
    setItem(USER_INFO, null)
      .then(() => {
        clearUserInfo();
        navigation.navigate('Login');
      })
      .catch(() => {});
  };

  return (
    <ObserverView style={{flex: 1}} themeStyle={{backgroundColor: 'color_12'}}>
      <ObserverView>
        <Header title="set" navigation={navigation} />
        <TouchableOpacity style={styles.item} onPress={onEditPsd}>
          <ObserverText tKey="resetPassword" />
          <SvgRight />
        </TouchableOpacity>
        {/* <TouchableOpacity style={styles.item}>
          <ObserverText tKey="autoLogin" />
          <AutoLogin />
        </TouchableOpacity> */}
        <TouchableOpacity style={styles.item} onPress={onCleanHistory}>
          <ObserverText tKey="history" />
          <View style={styles.right}>
            <ObserverText style={styles.clean} tKey="cleanup" type="empty" />
            <SvgRight />
          </View>
        </TouchableOpacity>
        <ObserverButton
          style={styles.logout}
          themeStyle={{borderColor: 'color_9'}}
          tKey="logOut"
          type="link"
          onPress={onLogout}
        />
      </ObserverView>
    </ObserverView>
  );
};

export default Setting;

const styles = StyleSheet.create({
  item: {
    paddingHorizontal: dpw16,
    paddingVertical: dpw12,
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
  },
  logout: {
    borderTopWidth: 1,
  },
  right: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  clean: {
    marginRight: dpw8,
  },
});
